<script setup lang="ts">
import MdEditor from "../../../../components/md/MdEditor.vue"
import GenerateProgress from "../../../../components/GenerateProgress.vue"
import {ref} from 'vue'
import {QuestionType} from "@/views/question/addQuestion/types/questionTypes.ts";

const props = defineProps<{
  modelValue?: string
  content?: string
  isEditorFullscreen?: boolean
  questionType: number | undefined
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'update:content': [value: string]
  'fullscreen-change': [value: boolean]
  'generate-content': []
}>()

const handleEditorFullscreenChange = (isFullscreen: boolean) => {
  emit('fullscreen-change', isFullscreen)
}

// 添加生成内容状态控制
const isGenerating = ref(false)

// 生成内容处理函数
const handleGenerateContent = () => {
  isGenerating.value = true
  emit('generate-content')
}

// 提供重置方法给父组件
const resetGenerating = () => {
  isGenerating.value = false
}

defineExpose({
  resetGenerating
})
</script>

<template>
  <div class="main-section">
    <el-form-item label="题目标题" prop="title" :class="{ 'hide-when-fullscreen': isEditorFullscreen }">
      <template #label>
        题目标题<span class="required-asterisk">*</span>
      </template>
      <el-input
          :model-value="props.modelValue"
          @update:model-value="(val: string) => emit('update:modelValue', val)"
          placeholder="请输入题目标题"
          :maxlength="100"
          show-word-limit
      />
    </el-form-item>

    <el-form-item prop="content">
      <template #label>
        <span>题目详情</span>
        <el-button v-if="questionType===QuestionType.PROGRAMMING" color="#626aef" style="margin-left: 20px"
                   @click="handleGenerateContent">AI 生成
        </el-button>
      </template>
      <div class="editor-wrapper">
        <MdEditor
            :value="props.content || ''"
            :handle-change="(val: string) => emit('update:content', val)"
            @fullscreen-change="handleEditorFullscreenChange"
        />
        <!-- 使用通用生成进度组件 -->
        <GenerateProgress
            :visible="isGenerating"
            title="AI正在生成内容"
            :fullscreen="false"
        />
      </div>
    </el-form-item>
  </div>
</template>

<style scoped>
.editor-wrapper {
  width: 100%;
  position: relative;
}

.main-section {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:deep(.el-form-item__label) {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  padding-bottom: 12px;
  position: relative;
  display: inline-block;
}

:deep(.el-form-item__label)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 24px;
  height: 2px;
  background-color: var(--el-color-primary);
  border-radius: 1px;
}

.hide-when-fullscreen {
  display: none !important;
}

.editor-wrapper {
  position: relative;
  z-index: 1000;
}

.required-asterisk {
  color: var(--el-color-danger);
  margin-left: 4px;
}
</style>
